<template>
  <div class="box">
    <div style="display: flex;">
      
        <div style="display: flex; margin-top: 3vh;">
            <el-radio v-model="radio" label="0" @input="geUsers"  >未封禁</el-radio>
      <el-radio v-model="radio" label="2" @input="geUsers">已封禁</el-radio>
        </div>

      <div style="display: flex; margin-left: 65%;"> 
        <el-input v-model="input" 
        size="mini"
        style="margin-top: 2vh;"
        placeholder="请输入账号" ></el-input>  
        <el-button size="mini" class="searchBtn" @click="searchByPhone">搜索</el-button></div>
    </div>
    <div class="tag-list">
      <el-table :data="users" border size="small" style="width: 100%">
        <el-table-column fixed prop="id" label="用户id"> </el-table-column>
        <el-table-column fixed prop="name" label="昵称"> </el-table-column>
        <el-table-column prop="phone" label="账号"> </el-table-column>

        <el-table-column prop="cardCase" label="个性签名"> </el-table-column>

        <el-table-column fixed="right" label="封面&视频">
          <template slot-scope="scope">
            <el-button
              @click="changeStatus(scope.row.id)"
              type="text"
              size="small"
              >{{ radio == 0 ? '封禁' : '解封' }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
    
    <script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["baseUrl"]),
  },
  data() {
    return {
      dialoger: false,
      radio: '0',
      users: [],
      input:''
    };
  },
  methods: {
    async changeStatus(uid) {
    var obj = {
        id:uid,
        status:this.radio == 0 ? 2:0
    }
      const { data: res } = await this.$http.post("/user/s", obj);
      if (res.code == 200) {
        this.$msg.fail("成功");
      }

    },

    async geUsers() {
      const { data: res } = await this.$http.get("/user/s/"+this.radio);
      if (res.code == 200) {
        this.users = res.data;
      }
    },
   async searchByPhone(){
  
    const { data: res } = await this.$http.get("/user/p",{
        params:{
            phone:this.input
        }
    });{
        if (res.code == 200) {
        this.users = res.data;
      }
    }
    }
  },
  created() {
    this.geUsers();
  },
};
</script>
    
    <style>

.box{
  width: 100%;
  height: 85vh;
}

.searchBtn{
    margin-top: 2vh;
    width: 4vw;
    height: 4vh;
    text-align: center;

    border:2px solid black ;
     margin-left: 1vw;

}
</style>